/**
 * 	Author:		Seppe Staes
 * 	Date:		04/2013
 * 	Purpose:	DASHBOARD WIDGET VIEW
 * 				View Mediator ('steers' the view)
 * 				Model in view as 'this.model'
 * 				Event binding on model triggers changes in view
 * 
 * 				'WidgetList' 1 - * 'WidgetListItem'
 *	Note:		!! print listItems: use 'self'
 * 				
 */

window.WidgetListView = Backbone.View.extend({

	initialize: function () {
        this.render();
    },

    render: function () {
    	
    	// !! Important: so we can reference each listItem with self
    	var self = this;
    	
    	$(this.el).html(this.template());
    	
    	// get ListItem models
    	this.model.each(function(edossier){ 
    		// create WidgetListItem
    		var itemView = new WidgetListItemView({model:edossier});
    		// render
    		$('.thumb-body-spacious', self.el).append(itemView.render().el);
		  });
    		
        return this;
    }

});

window.WidgetListItemView = Backbone.View.extend({

    initialize: function () {
    	this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
        this.render();
    },
    
    render: function () {
    	$(this.el).html(this.template(this.model.toJSON()));
    	// TODO: Rollover color tweens for listItems!
        return this;
    }

});